<!--
 * @Author: zhaozhehao zhaozhehao@erayt.com
 * @Date: 2023-09-04 11:42:00
 * @LastEditors: SilentWaver silentwaver.code@gmail.com
 * @LastEditTime: 2024-05-03 21:52:34
 * @Description: 
 * 
-->
<template>
  <div id="sw-desktop" :class="{ 'desktop-mask': $store.state.desktop.editMode }">
    <AppButton v-for="app in appList" :key="app.appId" :app-info="app" />
    <div class="add-app-button" @click.stop="addApp">+</div>
  </div>
</template>
<script>
import AppButton from "@/components/Common/AppButton.vue";
import appList from "@/constants/appList";

export default {
  data() {
    return {
    };
  },
  methods: {
    addApp() {
      this.$router.push({ name: 'installApp' })
    },

  },
  computed:{
    appList(){
      console.log(this.$store.state.config.appList,'this.$store.state.config.appList')
      return this.$store.state.config.appList
    }
  },
  created() {
    // axios.get('../../static/data.json').then(res => {
    //   console.log(res,"load json")
    // })
  
    const list = JSON.parse(localStorage.getItem("appList")) || [];
    this.appList = [... this.appList, ...list]
  },
  mounted() {
    const desktop = document.getElementById('sw-desktop')
    desktop.addEventListener('click', (e) => {
      console.log(e.target.className, 'handleDesktopClick')
      if (e.target !== 'sw-web-app-button-dropdown') {
        console.log('sw-web-app-button-dropdown-close')
        this.$store.commit('desktop/changeEditMode',{mode:false})
      }
    })
  },
  components: { AppButton },
};
</script>
<style  lang="less">
#sw-web-main-container {
  position: relative;
}

#sw-desktop {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.add-app-button {
  width: 100px;
  height: 100px;
  background-color: aliceblue;
  margin: 10px;
}

.desktop-mask {
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 101;
  opacity: 0.3;

}
</style>
